<template>
  <div class="knowledgeList">
    <breadcrumb :isClickTitleBack="false" :titleArr="titleArr" @back="breadcrumbBack" :isShowShadow="false" v-if="!['kmTable', 'kmSearchList'].includes(type)"></breadcrumb>
    <keep-alive>
      <component
        :is="type"
        :ref="type"
        @breadcrumbBack="breadcrumbBack"
        :searchForm="searchForm"
        @addKnowledge="addKnowledge"
        @cancelFun="addOrEditKnowledge"
        @lookFun="lookFun"
        @handleDetail="handleDetail"
        @addOrEditKnowledge="addOrEditKnowledge">
      </component>
    </keep-alive>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import lookDetails from '@/views/km/knowledgeBase/lookDetails.vue'
import addOrEditKnowledge from '@/views/km/knowledgeBase/addOrEditKnowledge.vue'
import kmTable from '@/views/km/knowledgeBase/kmTable.vue'
const getAllTitle = (titleArr: any, data: any) => {
  if (data.level === 1) {
    titleArr[data.level - 1] = data.label
    return titleArr
  }
  titleArr[data.level - 1] = data.label
  if (data.parent) {
    getAllTitle(titleArr, data.parent)
  }
}
@Component({
  name: 'knowledgeBase',
  components: {
    breadcrumb,
    lookDetails,
    addOrEditKnowledge,
    kmSearchList: () => import('@/views/km/knowledgeBase/kmSearchList.vue'),
    kmTable
  }
})
export default class KnowledgeBase extends Vue {
  @Prop() private dirObj: any
  private $bus: any
  private $route: any
  private currentDirObj = {}

  private type = 'kmTable'

  private searchForm: any = {}

  private titleArr: any = []

  get importType () {
    return this.$route.path.split('/')[3]
  }

  private addKnowledge () {
    this.type = 'addOrEditKnowledge'
    this.$nextTick(() => {
      this.titleArr = []
      getAllTitle(this.titleArr, this.currentDirObj)
      this.$bus.$emit('addKnowledge')
    })
  }

  private breadcrumbBack (type: string) {
    this.type = 'kmTable'
  }

  private handleDetail (row: any) {
    this.titleArr = []
    this.type = 'addOrEditKnowledge'
    this.$nextTick(() => {
      this.$bus.$emit('addOrEditKnowledge', row)
    })
    if (this.importType === 'knowledge_mgt_channel') {
      this.titleArr = row.catalogLabel.split('/')
    } else {
      getAllTitle(this.titleArr, this.currentDirObj)
    }
    this.titleArr[this.titleArr.length] = row.title
  }

  private addOrEditKnowledge () {
    this.type = 'kmTable'
    this.$nextTick(() => {
      const refs: any = this.$refs[this.type]
      if (refs && refs.getTableList) {
        refs.getTableList()
      }
    })
  }

  private lookFun (obj: any) {
    this.titleArr = []
    this.type = 'lookDetails'
    obj.importType = this.importType
    this.$nextTick(() => {
      this.$bus.$emit('lookDetails', obj)
    })
    const reg = /(<\/?strong.*?>)/gi
    obj.title = obj.title.replace(reg, '')
    if (this.importType === 'knowledge_mgt_channel') {
      this.titleArr = obj.catalogLabel.split('/')
    } else {
      getAllTitle(this.titleArr, this.currentDirObj)
    }
    this.titleArr[this.titleArr.length] = obj.title
  }

  private activated () {
    this.$bus.$on('directoryClick', (nodeObj: any) => {
      this.currentDirObj = (nodeObj && nodeObj.data) || {}
      this.titleArr = []
      getAllTitle(this.titleArr, (nodeObj && nodeObj.data) || {})
      this.type = 'kmTable'
      this.$nextTick(() => {
        const refs: any = this.$refs[this.type]
        if (refs && refs.directoryClick) {
          refs.directoryClick(nodeObj)
        }
      })
    })
    this.$bus.$on('keywordsSearchFun', (searchForm: any) => {
      this.searchForm = searchForm
      this.type = 'kmSearchList'
    })
    this.$bus.$on('kmSearchFun', (searchForm: any) => {
      this.type = 'kmTable'
      this.searchForm = searchForm
      window.setTimeout(() => {
        const refs: any = this.$refs[this.type]
        if (refs && refs.kmSearchFun) {
          refs.kmSearchFun(searchForm)
        }
      }, 0)
    })
  }

  private mounted () {
    if (Object.keys(this.currentDirObj).length === 0) {
      this.currentDirObj = this.dirObj
    }
  }

  private deactivated () {
    this.$bus.$off('directoryClick')
    this.$bus.$off('keywordsSearchFun')
    this.$bus.$off('kmSearchFun')
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/style/common.styl'
  .knowledgeList
    padding-right 10px
    height 100%
</style>
